<template>
	<view class="container">
		<u-subsection :customStyle="{height: '80rpx', borderRadius: '20rpx'}" fontSize="32rpx" bgColor="transparent" inactiveColor="#516DDB" activeColor="#516DDB" mode="subsection" :list="tabList" :current="current" @change="currentChange"></u-subsection>
		<!-- 地址 -->
		<view class="address-item">
			<view class="icon">
				<u-image width="100%" height="2rpx" src="/static/images/line.png"></u-image>
			</view>
			<view style="width: 100%;">
				<view class="user-info-box">
					<view class="user-info">
						<view class="name">漳大校</view>
						<view class="name">15012349999</view>
					</view>
					<!-- 位置导航 -->
					<view class="icon-box" style="position: relative;z-index: 99;" v-if="current == 1">
						<view class="">位置导航</view>
						<u-image width="24rpx" height="24rpx" src="/static/images/a19.png"></u-image>
					</view>
					<view class="right-icon" v-else>
						<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
					</view>
				</view>
				<view class="address">
					辽宁省 沈阳市 浑南区 浦江东方大厦2006室
				</view>
			</view>
		</view>
		<!-- 无地址展示 -->
		<!-- <view class="address-item" @tap="goAddress">
			<view class="icon">
				<u-image width="100%" height="2rpx" src="/static/images/line.png"></u-image>
			</view>
			<view class="address-tip" style="width: 100%;">
				请填写您的收货地址
			</view>
			<view class="right-icon">
				<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
			</view>
		</view> -->
		
		<!-- 商品详情 -->
		<view class="commodity-box">
			<view class="left">
				<u-image width="170rpx" height="155rpx" src="/static/logo.png"></u-image>
			</view>
			<view class="right">
				<view class="com-title">四川眉山爱媛38号可吸的果冻橙四川眉山爱媛38号可吸的果冻橙四川眉山爱媛38号可吸的果冻橙</view>
				<view class="sku-box">规格：超实惠套装1200g</view>
				<view class="count-box">购买数量：3件</view>
			</view>
		</view>
		
		<!-- 商品价格 -->
		<view class="order-item">
			<view class="status-box">
				<view class="name">商品价格</view>
				<view class="name">￥2900.01</view>
			</view>
			<view class="content-box">
				<view class="content-item">
					<text>配送方式</text>
					<text>快递包邮</text>
				</view>
				<view class="content-item">
					<text>购买数量</text>
					<text>3</text>
				</view>
				<view class="content-item">
					<text>抵扣券</text>
					
					<!-- 三种判断 -->
					<!-- <text>暂无可用</text> -->
					<view class="discount-box" @tap="showPop">
						<!-- <view class="discount">-30元</view> -->
						<view class="default">选择抵扣券</view>
						<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 支付方式 -->
		<view class="payment-select-box">
			<u-radio-group v-model="payment" placement="column">
				<view class="payment-item">
					<view class="left">
						<u-image width="40rpx" height="40rpx" src="/static/images/a40.png"></u-image>
						<view class="pay-name">微信支付</view>
					</view>
					<view class="right">
						<u-radio activeColor="#516DDB" name="1"></u-radio>
					</view>
				</view>
				<view class="payment-item center">
					<view class="left">
						<u-image width="40rpx" height="40rpx" src="/static/images/a41.png"></u-image>
						<view class="pay-name">余额支付</view>
						<view class="pay-tip">当前余额：123.23元</view>
					</view>
					<view class="right">
						<u-radio activeColor="#516DDB" name="2"></u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>
		
		<!-- 备注 -->
		<view class="order-notes">
			<view class="name">备注：</view>
			<view class="note-area">
				<u--textarea border="none" maxlength="100" v-model="note" placeholder="请输入备注" ></u--textarea>
			</view>
		</view>
	</view>
	
	<!-- 底部购买按钮 -->
	<view class="buy-wrap">
		<u-checkbox-group v-model="agree" placement="column">
			<view class="agreement-box">
				<u-checkbox name="agreeCheck" shape="circle" v-model:checked="agree[0]"></u-checkbox>
				<view class="context">
					<text>已阅读并同意</text>
					<text class="color" @tap="goAgreement(1)">《用户服务协议》</text>
					<text>和</text>
					<text class="color" @tap="goAgreement(2)">《隐私协议》</text>
				</view>
			</view>
		</u-checkbox-group>
		
		<view class="buy-btn-wrap">
			<view class="left">
				<view class="name">共计</view>
				<view class="price-box">
					<text class="yuan">￥</text>
					<text class="price">1231.12</text>
				</view>
			</view>
			<view class="right">
				<u-button throttleTime="1000" :customStyle="{height: '88rpx', letterSpacing: '.1rem', width: '345rpx'}" :hairline="false" type="mini"
					shape="circle" color="#516DDB" @click="payConfirm">立即购买</u-button>
			</view>
		</view>
	</view>
	
	
	<!-- 抵扣券弹窗 -->
	<u-popup closeable bgColor="transparent" :show="discountPop" @close="discountPop = false">
		<view class="discount-pop">
			<view class="discount-content">
				<view class="pop-title">选择抵扣券</view>
				<scroll-view scroll-y="true" style="max-height: 800rpx;">
					<view class="discount-list">
						<u-radio-group v-model="discount" placement="column">
						<view class="item" v-for="(item, i) in 4" :key="i">
							<view class="icon">
								<u-image width="180rpx" height="180rpx" src="/static/images/a21.png"></u-image>
							</view>
							<!-- 左上角 -->
							<view class="count-box">
								剩余3张
							</view>
							<view class="left">
								<view class="user-info">
									<view class="name">购药抵扣券</view>
								</view>
								<view class="mobile">
									抵扣券可在购买商品时使用
								</view>
							</view>
							<view class="right">
								<view class="price-box">
									<text>30</text>
									<text class="yuan">元</text>
								</view>
								<view class="radio-wrap">
									<u-radio activeColor="#516DDB" :name="i"></u-radio>
								</view>
							</view>
						</view>
						</u-radio-group>
					</view>
				</scroll-view>
			</view>
			<view class="pay-btn">
				<u-button throttleTime="1000" :customStyle="{height: '86rpx', letterSpacing: '.1rem', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)'}" :hairline="false" type="mini"
					shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="confirmDiscount">确认</u-button>
			</view>
		</view>
	</u-popup>
	
</template>

<script setup>
	// 是否阅读协议
	const agree = ref([])
	// 支付方式
	const payment = ref('1')
	// 顶部切换
	const current = ref(0)
	// 备注
	const note = ref('')
	// 抵扣弹窗
	const discountPop = ref(false)
	// 选中的抵扣券
	const discount = ref(0)
	const tabList = ref(['商家配送', '到店自提'])
	const currentChange = e => {
		current.value = e
	}
	const showPop = () => {
		discountPop.value = true
	}
	// 确认按钮
	const confirmDiscount = () => {
		discountPop.value = false
	}
	
	// 立即购买
	const payConfirm = () => {
		if (agree.value[0] != 'agreeCheck') {
			uni.showToast({
				icon: 'none',
				title: '请阅读并同意隐私协议',
				mask: true
			})
			return
		}
		uni.navigateTo({
			url: '/mine/reservation/success'
		})
	}
	// 跳转地址列表
	const goAddress = () => {
		uni.navigateTo({
			url: '/mine/address/list?source=payment',
			success: () => {
				uni.$once('select', (res) => {
					console.log(res);
				})
			}
		})
	}
	// 用户协议和隐私政策 1用户 2隐私
	const goAgreement = (e) => {
		uni.navigateTo({
			url: `/mine/agreement/agreement?status=${e}`
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 26rpx 300rpx;
	}
	
	.address-item {
		margin-top: 30rpx;
		position: relative;
		@include between(100%);
		margin-bottom: 40rpx;
		padding: 38rpx 38rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		.address-tip {
			font-weight: bold;
			color: #000000;
			font-size: 32rpx;
		}
		.icon-box {
			display: flex;
			align-items: center;
		
			&>view {
				margin-right: 10rpx;
				color: #516DDB;
				font-size: 28rpx;
			}
		}
		.icon {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 3;
		} 
		.user-info-box {
			@include between(100%);
			.user-info {
				@include start();
				.name {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					margin-right: 26rpx;
				}
			}
		}
	
		.address {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #000000;
		}
	}
	
	.commodity-box {
		@include between(100%, 100%);
		margin-bottom: 30rpx;
		padding: 36rpx 26rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		.right {
			flex: 1;
			margin-left: 22rpx;
			@include between(100%, 170rpx);
			flex-direction: column;
			align-items: flex-start;
			padding: 10rpx 0;
			color: #000000;
			font-size: 30rpx;
			.com-title {
				@include over-ellip(450rpx);
				font-weight: bold;
			}
		}
	}
	
	
	.order-item {
		margin-bottom: 30rpx;
		padding: 38rpx 38rpx 1rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	
		.status-box {
			@include between(100%);
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #E8E8E8;
			margin-bottom: 30rpx;
			.name {
				font-size: 30rpx;
				font-weight: bold;
				color: #000000;
			}
			.status {
				color: #D66A44;
			}
			.status1 {
				color: #AAAAAA;
			}
		}
		.content-box {
			width: 100%;
			position: relative;
			font-size: 26rpx;
			color: #606672;
	
			.content-item {
				@include between(100%);
				margin-bottom: 30rpx;
				font-size: 28rpx;
				color: #000000;
				.discount-box {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					.discount {
						color: #F55726;
						margin-right: 14rpx;
					}
					.default {
						color: #000000;
						margin-right: 14rpx;
					}
				}
				.order-no {
					@include start();
					& > text {
						color: #312C2A;
						margin-right: 20rpx;
					}
					
				}
	
				&>text {
					&:nth-child(2) {
						color: #312C2A;
					}
				}
				
			}
		}
	}
	
	.payment-select-box {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 20rpx;
		.payment-item {
			@include between(100%);
			.left {
				@include start();
				.pay-name {
					color: #000000;
					font-size: 28rpx;
					margin-left: 16rpx;
				}
				.pay-tip {
					margin-left: 16rpx;
					color: #B3BCCC;
				}
			}
		}
		.center {
			margin-top: 26rpx;
		}
	}
	
	.order-notes {
		margin-top: 20rpx;
		border-radius: 30rpx;
		padding: 10rpx 30rpx;
		@include between(100%);
		align-items: flex-start;
		background-color: #fff;
		.name {
			padding-top: 16rpx;
			color: #000000;
			font-size: 28rpx;
			// margin-right: 28rpx;
		}
		.note-area {
			flex: 1;
		}
	}
	
	.buy-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-top: 21rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
		box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);
		background: #FFFFFF;
		z-index: 99;
		
		.agreement-box {
			@include start();
			.context {
				font-size: 26rpx;
				color: #333333;
				margin-left: 10rpx;
		
				.color {
					color: #8B601E;
				}
			}
		}
		.buy-btn-wrap {
			@include between(100%);
			margin-top: 21rpx;
			.left {
				display: flex;
				align-items: flex-end;
				.name {
					color: #000000;
					margin-right: 14rpx;
					 
				}
				.price-box {
					color: #F55726;
					.price {
						font-weight: bold;
						font-size: 40rpx;
					}
				}
			}
		}
	}
	
	.discount-pop {
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		.discount-content {
			padding: 40rpx 40rpx 0;
		}
		.pop-title {
			color: #000000;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 52rpx
		}
		
		.discount-list {
			.item {
				@include between(100%);
				position: relative;
				margin-bottom: 30rpx;
				padding: 30rpx 38rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				box-shadow: 0rpx 0rpx 30rpx 1rpx rgba(153, 153, 153, 0.16);
				overflow: hidden;
				.icon {
					position: absolute;
					top: 0;
					right: 38rpx;
					z-index: 99;
				}
				.count-box {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 99;
					@include center(144rpx, 50rpx);
					background: #ECF1FE;
					border-radius: 30rpx 0rpx 20rpx 0rpx;
					color: #5780EF;
				}
				
				.user-info {
					@include between(100%);
					.name {
						font-size: 34rpx;
						color: #312C2A;
					}
				}
				.mobile {
					margin-top: 18rpx;
					font-size: 26rpx;
					color: #999999;
				}
				.left {
					padding-top: 30rpx;
				}
				.right {
					position: relative;
					z-index: 99;
					@include center();
					flex-direction: column;
					.price-box {
						font-weight: bold;
						color: #F55726;
						font-size: 46rpx;
						margin-bottom: 10rpx;
						.yuan {
							font-size: 26rpx;
						}
					}
					.radio-wrap {
						margin-top: 30rpx;
					}
				}
			}
			
		}
	
		.pay-btn {
			margin-top: 30rpx;
			padding: 13rpx 55rpx 23rpx;
			box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);
			
		}
	}
</style>
